<template>
<div class="page has-navbar has-tabbar" >
   	<von-header theme="assertive">
        <button class="button button-icon ion-ios-arrow-back" type="button" slot="left" @click="$router.go(-1)"></button>
        <span slot="title">找回密码</span>
	</von-header>
    <div class="page-content padding-top">
    <item class="y-item">
      <span class="item-title">手机号</span>
      <input type="text" class="y-item-input" name="carTitle" v-model="tel" required onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" autocomplete="off" maxlength=11 placeholder="请输入需要找回密码的手机号" required>
    </item>
    <item style="padding:0 15px;">
    <div class="car-enitor-tr">
        <div class="car-editor-name">验证码</div>
        <div class="car-editor-input"><input type="tell" name="validateCode" placeholder="请输入验证码" v-model="yzm" required onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" autocomplete="off" maxlength=6 /></div>
        <div class="car-editor-right">
        <div class="car-password-code" v-if="getCodeShow == 0" @click="getCode">获取验证码</div>
        <div class="car-password-codeoff" v-else>{{getCodeShow}}s</div>
        </div>
    </div>
    </item>
    <!-- <item class="y-item special">
      <span class="item-title">验证码</span>
      <input type="text" class="y-item-input" @focus="cancelColor" name="carTitle" v-model="yzm" placeholder="请输入验证码" required>
      <md-button :class="this.codeColor ? 'button button-assertive button-small button-block' : 'button button-block button-small'" @click.native="code">{{codeColors}}</md-button>
    </item> -->
    <item class="y-item">
      <span class="item-title">新密码</span>
      <input type="password" class="y-item-input" name="carTitle" v-model="newpassword" placeholder="请输入新密码" required>
    </item>
    <item class="y-item" style="margin-bottom: 65px;">
      <span class="item-title">确认密码</span>
      <input type="password" class="y-item-input" name="carTitle" v-model="againnewpassword" placeholder="请再次输入新密码" required>
    </item>
      <div class="outbtn" ><md-button class="button button-assertive button-block" @click.native="Preservation">保存</md-button></div>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      tel: "",
      yzm: "",
      newpassword: "",
      againnewpassword: "",
      codeColor: true,
      placeholders: "",
      times: 50,
      getCodeShow: 0
    };
  },
  updated() {
    var _that = this;
    if (this.placeholders == 50) {
      var shijian = setInterval(function() {
        _that.times = _that.times - 1;
        if (_that.times < 0) {
          clearInterval(shijian);
          _that.placeholders = "获取验证码";
          _that.codeColor = true;
        }
      }, 1000);
    }
  },
  computed: {
    codeColors: function() {
      if (!this.codeColor) {
        this.placeholders = this.times;
        return this.placeholders;
      } else {
        this.placeholders = "获取验证码";
        return this.placeholders;
      }
    }
  },
  methods: {
    Preservation() {
      if (
        this.tel == "" ||
        this.yzm == "" ||
        this.newpassword == "" ||
        this.againnewpassword == ""
      ) {
        $toast.show("请输入完整信息！");
        return false;
      }
      if (this.newpassword.length > 16 || this.newpassword.length < 6) {
        window.$toast.show("密码长度在6-16位");
        return false;
      }
      if (this.newpassword !== this.againnewpassword) {
        $toast.show("两次密码输入的不一致，请重新输入");
        return false;
      }
      axios
        .get(baseUrl + "/controller/findPwd", {
          params: {
            newPassword: this.newpassword,
            userMobile: this.tel,
            validateCode: this.yzm
          }
        })
        .then(function(res) {
          if (res.data.code == 1) {
            $router.forward("/");
          }
        });
    },
    cancelColor() {
      if (this.yzm.length >= 6) {
        this.placeholders = "获取验证码";
        this.codeColor = true;
      }
    },
    getCode() {
      if (!/^[0-9]{11}$/gi.test(this.tel)) {
        window.$toast.show("请输入正确手机号");
        return false;
      }
      window.axios
        .get(baseUrl + "/controller/getSmsValidateCode", {
          params: { userMobile: this.tel }
        })
        .then(res => {
          // console.log(res)
          if (res && res.data && res.data.code == 1) {
            setTimeout(() => {
              window.$toast.show("发送成功，请注意查收");
            }, 400);
          } else {
            setTimeout(() => {
              window.$toast.show("请输入正确账户信息");
              this.getCodeShow = 0;
              // console.log(this.getCodeShow)
              clearInterval(setVal)
            }, 400);
          }
        });
      this.getCodeShow = 60;
      let setVal = setInterval(() => {
        this.getCodeShow--;
        if (this.getCodeShow == 0) clearInterval(setVal);
      }, 1000);
    }
  }
};
</script>
<style scoped>
.car-editor-right {
  padding: 0;
}
.button-small {
  width: 80px;
  height: 35px;
  line-height: 35px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  bottom: 0;
  margin: auto 0;
}
.car-password-code {
  background: #ff6816;
  color: #fff;
  height: 40px;
  margin: 5px 0;
  padding: 0 10px;
  line-height: 40px;
  border-radius: 2px;
}
.car-password-codeoff {
  height: 40px;
  margin: 5px 0;
  padding: 0 10px;
  line-height: 40px;
  border-radius: 2px;
  border: 1px solid #aaa;
  box-sizing: border-box;
  width: 85px;
  text-align: center;
  font-size: 16px;
}
</style>

